<script setup>
	import { onMounted, ref, watch } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	const props = defineProps({
		status: { type: Number, default: 1 },
		categary: { type: Number, default: 1 },
	})
	const currentPage = ref(1)
	const godlist = ref([])
	async function getList() {
		const res = await http.request({
			url: '/api/shop/shopBox',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
				status: props.status,
			},
		})
		console.log(res)
		godlist.value = [...godlist.value, ...res.data]
	}

	watch(
		() => props.status,
		(newstatus) => {
			if (props.categary == 2) {
				currentPage.value = 1
				godlist.value = []
				getList()
			}
		},
		{ deep: true, immediate: true }
	)

	function getMore() {
		++currentPage.value
		getList()
	}

	onMounted(() => {
		godlist.value = []
		currentPage.value = 1
		getList()
	})
	// onShow(() => {
	// 	getList()
	// })
</script>

<template>
	<view class="luckybag-content">
		<scroll-view
			scroll-y="true"
			class="scroll-Y"
			@scrolltolower="getMore"
			style="height: 67vh"
		>
			<!-- 天选列表 -->
			<view
				class=""
				style="margin-bottom: 120rpx"
				v-if="status != 1 && status != 4"
			>
				<view
					class="tianxuan-list"
					v-for="item in godlist"
					:key="item.id"
				>
					<view
						class="tianxuan-image tianxuan-titleavel"
						:class="{ 'set-gray': item.leftover_num == 0 }"
					>
						<image
							:src="item.img"
							style="border-radius: 10rpx; background-color: #fff"
						></image>
					</view>
					<view class="tianxuan-titleavel">
						<view class="tianxuan-tit">{{ item.name }}</view>
						<view class="tianxuan-leavel">
							<scroll-view
								class="scroll-view_H"
								scroll-x="true"
								style="height: 100%"
							>
								<view
									class=""
									style="display: flex; align-items: center"
								>
									<view
										class="rule-item"
										v-for="(rule, index) in item.goods_info"
										:key="'rule' + index + rule.id"
									>
										<view
											class="rule-name"
											:class="{
												'set-gray':
													rule.sum_leftover == 0,
											}"
										>
											{{ rule.rule_name }}
										</view>
										<view
											class="rule-num"
											:class="{
												'set-gray':
													rule.sum_leftover == 0,
											}"
										>
											{{
												`${rule.sum_leftover}/${rule.sum_num}`
											}}
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="tianxuan-money">
							<text class="">￥{{ item.price }}</text>
							<text class="remainder">{{
								`余${item.leftover_num}/共${item.sum_num}`
							}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 天选列表-审核 -->
			<view class="" style="margin-bottom: 120rpx" v-else>
				<view
					class="lucky-audit"
					v-for="item in godlist"
					:key="item.id"
				>
					<view class="audit-img">
						<image
							class=""
							:src="item.img"
							style="
								border-radius: 10rpx;
								background-color: #fff;
								background-color: #fff;
							"
						></image>
					</view>
					<view class="audit-information">
						<view
							class="information-num"
							style="justify-content: space-between"
						>
							<view class="">
								<text class="">名称:</text>
								<text
									class=""
									style="margin-left: 20rpx; font-weight: 700"
									>{{ item.name }}</text
								>
							</view>
							<view
								v-if="item.status == 1"
								class=""
								style="
									justify-content: flex-end;
									color: #a378ff;
								"
								>已申请</view
							>
							<view
								v-if="item.status == 3"
								class=""
								style="justify-content: flex-end; color: red"
								>已拒绝</view
							>
						</view>
						<view class="information-num">
							<text class="">时间:</text>
							<text
								class=""
								style="margin-left: 20rpx; font-weight: 700"
							>
								{{
									parseTime(item.add_time, '{y}-{m}-{d}')
								}}</text
							>
						</view>
						<view class="information-num">
							<text class="">价格:</text>
							<text
								class=""
								style="
									color: #a378ff;
									margin-left: 20rpx;
									font-weight: 700;
								"
							>
								{{ item.price }}</text
							>
							<!-- <view class="copy">复制</view> -->
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<style lang="scss" scoped>
	.set-gray {
		filter: grayscale(100%) !important;
	}
	.luckybag-content {
		.tianxuan-list {
			width: 710rpx;
			height: 236rpx;
			background-color: #fff;
			margin: 30rpx auto;
			border-radius: 14rpx;
			display: flex;

			.tianxuan-image {
				width: 55%;
				height: 236rpx;
				text-align: center;

				image {
					height: 196rpx;
					width: 355rpx;
					margin: 20rpx auto;
				}
			}
		}

		.tianxuan-titleavel {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 90%;
			margin: auto;

			.tianxuan-tit {
				// margin-top: 20rpx;
			}

			.tianxuan-leavel {
				width: 272rpx;
				height: 80rpx;
				border: 3rpx solid #dbccff;
				padding: 3rpx 13rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				.rule-item {
					display: flex;
					flex-shrink: 0;
					flex-direction: column;
					align-items: center;
					margin-right: 25rpx;
					.rule-name {
						font-family: freeBB;
						font-size: 28rpx;
						color: rgba(168, 130, 255, 1);
					}
					.rule-num {
						height: 30rpx;
						padding: 0 9rpx;
						box-sizing: border-box;
						border-radius: 6rpx;
						border: 2rpx solid rgba(168, 130, 255, 1);
						box-sizing: border-box;
						color: rgba(168, 130, 255, 1);
						text-align: center;
						font-size: 16rpx;
						line-height: 30rpx;
					}
				}
			}
		}

		.tianxuan-money {
			display: flex;
			justify-content: inherit;

			.remainder {
				font-size: 18rpx;
				color: #8e6ed4;
				line-height: 50rpx;
			}
		}
		.lucky-audit {
			// margin-bottom: 120rpx;
			padding: 0 19rpx;
			height: 224rpx;
			background-color: #fff;
			border-radius: 14rpx;
			margin: 20rpx auto;
			display: flex;
			align-items: center;

			.audit-img {
				// width: 50%;
				// height: 224rpx;
				// display: flex;
				// justify-content: center;
				// align-items: center;

				image {
					width: 375rpx;
					height: 195rpx;
					margin-right: 20rpx;
				}
			}
		}

		.audit-information {
			width: 100%;
			height: 182rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.information-tit {
			display: flex;
		}

		.information-num {
			display: flex;
			width: 100%;
			// justify-content: space-between;
			// margin-top: 30rpx;
			font-size: 26rpx;
		}

		.express {
			color: #808080;
			font-size: 20rpx;
			text-align: center;
			margin-left: 10rpx;
			line-height: 37rpx;
		}

		.copy {
			background-color: #af8ef5;
			width: 52rpx;
			// line-height: 26rpx;
			border-radius: 8rpx;
			color: #fff;
			margin-left: 30rpx;
			font-size: 20rpx;
			text-align: center;
			line-height: 37rpx;
		}
	}
</style>
